//该文件存放 echarts模板

//堆叠图
export const examCharts = (that, containerId, enterData, midData, endData) => {
    //获取容器，初始化echats实例
    let myChart = that.$echarts.init(document.getElementById(containerId));
    //指定图标的配置项和数据
    let option = {
        title: {
            text: '成绩整体分析'
        },
        tooltip: {
            trigger: 'axis'//坐标触发图形 用于折线图
        },
        legend: {
            top: "10%",
            data: ['入学', '期中', '期末']//设置折线标识  不同颜色代表什么
        },
        grid: {
            top: "20%",
            left: "5%",
            right: "5%",
            bottom: "5%",
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["语文", "英语", "数学", "理综", "文综"],
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: "入学",
                type: "line",
                // stack: "Total", 该配置项会将 纵轴的值求和
                data: enterData,
            },
            {
                name: "期中",
                type: "line",
                // stack: "Total",
                data: midData,
            },
            {
                name: "期末",
                type: "line",
                // stack: "Total",
                data: endData,
            },
        ]
    };
    //使用刚制定的配置项和数据显示图表
    myChart.setOption(option)

    // 当希望echarts图随着屏幕的宽度的变化而变时
    //   前提是容器的宽和高不能给具体的px 给成百分比
    window.onresize = function () {
        myChart.resize();
    };
}

//折线图
export const lineCharts = (that,containerId,subject,gradeSubject) => {
    //获取容器，初始化echats实例
    let myChart = that.$echarts.init(document.getElementById(containerId));
    //指定图标的配置项和数据
    let option = {
        title: {
            text: subject
        },
        xAxis: {
            type: 'category',
            data: ['入学', '期中', '期末']
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            top: "20%",
            left: "5%",
            right: "5%",
            bottom: "5%",
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        series: [
            {
                data: gradeSubject,
                type: 'line'
            }
        ]
    };
    //使用刚制定的配置项和数据显示图表
    myChart.setOption(option)

    // 当希望echarts图随着屏幕的宽度的变化而变时
    //   前提是容器的宽和高不能给具体的px 给成百分比
    window.onresize = function () {
        myChart.resize();
    };
}